<template>
  <div id="app">
    <van-nav-bar title="消毒供应系统" right - text="购物车" right - icon="cart - o" />
    <div class="function - buttons">
      <van-grid :column-num="3">
        <van-grid-item v-for="(item, index) in functionList" :key="index" :text="item.text" :icon="item.icon"
          :color="item.color" @click="() => console.log(item.text + '点击')" />
      </van-grid>
    </div>
    <div class="message - notice">
      <div class="notice - title">消息通知</div>
      <van-list>
        <van-list-item v-for="(msg, index) in messageList" :key="index" :title="msg.date"
          :description="msg.content" />
      </van-list >
    </div>
    <div class="warning - info">
      <div class="notice - title">预警信息</div>
      <van-list >
        <van-list-item v-for="(warn, index) in warningList" :key="index" :title="warn.date"
          :description="warn.content" icon="error - o" icon-color="red" />
      </van-list>
    </div>
    <van-tabbar >
      <van-tabbar-item name="home" icon="home - o">首页</van-tabbar-item>
      <van-tabbar-item name="message" icon="chat - o">消息</van-tabbar-item>
      <van-tabbar-item name="my" icon="user - o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      functionList: [
        { text: '回收', icon: 'recycle - o', color: '#6666ff' },
        { text: '发放', icon: 'send - o', color: '#66cc66' },
        { text: '清洗', icon: 'water - o', color: '#ffcc00' },
        { text: '包装', icon: 'package - o', color: '#6699ff' },
        { text: '灭菌', icon: 'fire - o', color: '#cc66cc' },
        { text: '入库', icon: 'box - o', color: '#ff6666' },
        { text: '出库', icon: 'arrow - left - circle - o', color: '#3399ff' },
        { text: '盘点', icon: 'list - o', color: '#66cc66' },
        { text: '统计', icon: 'area - chart - o', color: '#33cc33' }
      ],
      messageList: [
        { date: '2021 - 02 - 21', content: '关于加强消毒供应室工作规范的通知' }
      ],
      warningList: [
        { date: '2021 - 02 - 21', content: '器械XX已临近过期，请尽快处理' },
        { date: '2021 - 02 - 21', content: '器械XX已临近过期，请尽快处理' }
      ]
    };
  }
};
</script>

<style scoped>
.function-buttons {
  padding: 10px;
}

.message-notice {
  padding: 10px;
}

.warning info {
  padding: 10px;
}

.notice-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
}
</style>